// 在创建 Vue 实例之前全局定义过滤器,第一个参数，字符串：过滤器的名字，第二个参数，匿名函数：过滤器的函数体
Vue.filter("price", function (value) {
    return "￥" + value.toFixed(2)
})

let app = new Vue({
    el: "#app",
    data: {
        msg: "hello",
        books: [
            {
                id: 1,
                name: '《算法导论》',
                date: '2006-9',
                price: 85,
                count: 1

            },
            {
                id: 2,
                name: '《UNIX编程艺术》',
                date: '2006-2',
                price: 59,
                count: 1

            },
            {
                id: 3,
                name: '《编程珠玑》',
                date: '2008-10',
                price: 39,
                count: 1

            },
            {
                id: 4,
                name: '《代码大全》',
                date: '2006-3',
                price: 128,
                count: 1

            }
        ]
    },
    methods: {
        decrease(i) {
            this.books[i].count--
        },
        increase(i) {
            this.books[i].count++
        },
        remmove(index) {//移除books数组中的book对象
            this.books.splice(index, 1)

        },
        showPrice(price) {
            return "￥" + price.toFixed(2)
        }
    },
    computed: {
        totalPrice() {
            let total = 0
            for (const item of this.books) {
                total += item.price * item.count
            }
            return total
        }
    },
    filters: {
        // 在一个组件的选项中定义本地的过滤器,局部过滤器
        improvePrice(value) {
            return "￥" + value.toFixed(2)
        }
    }
})


// let app2 = new Vue({
//     el:"#app2",
//     data:{
//         msg:"shane",
//         num:100
//     }
// })


// js的三个高级函数

// 命令式编程：原生js开发或jqery通过操作DOM对象来完成数据的更改
// 声明式编程：框架底层帮助我们完成DOM操作
// 编程范式：命令式编程与声明式编程
// 编程范式： 面向对象与面向过程
// 面向过程方式第一公民：函数， 函数式编程

// filter/map/reduce 所有上一个结果都可以作为下一个需求的参数

const nums = [10, 20, 111, 222, 444, 40, 50]

// // 1. 从nums数组中取出小于100的数
// let newNums = []

// for (const n of nums) {
//     if (n < 100) {
//         newNums.push(n)
//     }
// }
// console.log(newNums);

// // 2. 从 （1）要求中小于100的数都乘以2
// let newNewNums = []
// for (const n of newNums) {
//     newNewNums.push(n * 2)
// }
// console.log(newNewNums);

// // 3. 从 （2）要求把所有的数累加，得到最终结果
// let total = 0
// for (const n of newNewNums) {
//     total += n
// }

// console.log(total);

// 1. filter函数的使用
// 参数是一个回调匿名函数，数组有多少个成员，就回调多少次
let newNums = nums.filter(function (n) {
    //匿名函数中，有一个参数n，是每一次回调的数组成员，第一次回调n是10，第二次回调n是数组第二个成员20
    //匿名函数必须返回布尔值，true 返回n进入到新的数组中
    return n < 100
})

console.log(newNums);

// 2. map函数的使用
// 它可以对数组中每个内容进行操作
// 参数为匿名回调函数
let newNewNums = newNums.map(function (n) {
    // 参数为n，指代每次回调的数组中的成员
    return n * 2
})

console.log(newNewNums);

// 3. reduce函数， 第一个参数是回调匿名函数，第二个参数默认值
// 作用就是对数组中所有内容进行汇总
let total = newNewNums.reduce(function (preValue, n) {
    // 匿名回调函数中第一个参数preValue指代上一次返回的值
    // 第二个参数为n，本次回调进入的数组成员
    return preValue + n
}, 0)

// 第一次运行时候，默认值传入到preValue里， n是第一个数组成员
// 第二次运行， preValue指代上一次返回的值 n是第二个数组成员

console.log(total);


let totalNums = nums.filter(function (n) {
    return n < 100
}).map(function (n) {
    return n * 2
}).reduce(function (preValue, n) {
    return preValue + n
}, 0)

console.log(totalNums);


let totalNums2 = nums.filter(n => n < 100).map(n => n * 2).reduce((preValue, n) => preValue + n, 0)
console.log(totalNums2);

// 函数式编程